iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 2
0
自我挑戰組

網頁學習紀錄系列 第 2

鐵人賽Day2-寫一個 Navbar 導覽列吧!

  • 分享至 

  • xImage
  •  

現在網頁為了 RWD ,在 layout 的 navbar 跟 footer 都會固定,而網頁最上方都會有一個 navbar,裡面會有 logo 還有一些選項,這次就來寫一個 navbar 吧!

這次以音樂為主題來寫一個網頁,從 navbar 開始,會像下圖這樣
https://ithelp.ithome.com.tw/upload/images/20190903/20119300JCktEmpLa2.png

首先, HTML 會這樣寫

 <div class="navbar">
         <div class="container">
         設定一個範圍
            <div class="logo">
            這是 LOGO 區
                <a href="#">
                   <i class="fas fa-music"></i>MusicIsGood
                </a>
                將 LOGO 跟 標題綁在一起,這裡應該要寫個 <h1>,不過先保留,等之後網頁需要再決定
            </div>

            <ul class="menu">
                <li><a href="#" target="_blank">華語</a></li>
                <li><a href="#" target="_blank">西洋</a></li>
                <li><a href="#" target="_blank">東洋</a></li>
                <li><a href="#" target="_blank">鄉村</a></li>
            </ul>
歌曲曲風用四個選單來表示
        </div>
    </div>

再來寫 CSS,先到 meyerweb 網站複製裡面的程式碼,讓瀏覽器所有數值都 reset,不過我用的是 SCSS來寫,所以程式碼會如下:

 .navbar{
    background-color: #333;
    height: 50px;
}
先把 navbar 的背景設定好,因為頁頭的 layout 是不太會變的,所以高度可以寫固定。

.container{
    width: 1024px;
    margin: 0 auto;
寫一個限制寬度,因為在螢幕上人眼的角度是有限的,設定一個比較舒服的寬度是很重要的事情。    
}

.logo{
    display:inline;
    因為在 <div> 標籤中預設是 display:block,會佔滿整排空間,所以改成 inline,就不會檔到後面的選單。
    a{
        color:#ffc078;
        margin-top: 1em;
        margin-bottom: 1em;
        text-decoration: none;
        line-height:50px;
        font-size: 24px;
    }
    設定 LOGO 文字,應該這邊要寫一個 <h1>,但是可能後面會需要,所以先保留,之後再來優化。
    .fa-music{
        color:#ffc078;
        margin-right: 1em;
       }
把 fontawesome 圖案改顏色,這其實是文字,不是圖案。
}
.menu{
    float:right;
    把選單擺右邊
    li{
        float:left;
        把選單內容要並排呈現。
    }
        a{
        display:flex;
        margin-right: 30px;
        color:#ffc078;
        text-decoration: none;
        line-height:50px;
        padding: 0 1em;
    }
    a 連結的設定
    a:hover{
        background-color:  #ffc078;
        color:#333
    }
    a 連結的滑鼠移動過去的效果
}

然後畫面就完成了,codepen在這
https://codepen.io/hnzxewqw/pen/yLBzrOe


上一篇
鐵人賽 Day 1-寫在鐵人賽第一天
下一篇
鐵人賽Day3-寫一個 Search 搜尋列吧!
系列文
網頁學習紀錄30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言